<template>
  <div>
    <headers></headers>
    <div class="message">
      <div class="friendList">
        <div
          class="item"
          v-for="(item, index) in friendList"
          :key="index"
          @click="chooseItem(item)"
        >
          <img src="@/assets/images/posts/1.jpg" alt="" />
          <strong>{{ item.nickname }}</strong>
        </div>
      </div>
      <div class="messageBox">
        <MessageBox :nickname="clickName" />
      </div>
    </div>
    <footers></footers>
  </div>
</template>

<script>
import MessageBox from '@/components/common/MessageBox.vue'

export default {
  components: {
    MessageBox
  },
  data () {
    return {
      clickName: '',
      friendList: [
        {
          id: '001',
          nickname: '甲斗王',
          avator: ''
        },
        {
          id: '001',
          nickname: '空我',
          avator: ''
        },
        {
          id: '001',
          nickname: '亚吉脱',
          avator: ''
        },
        {
          id: '001',
          nickname: '时王',
          avator: ''
        },
        {
          id: '001',
          nickname: '甲斗王',
          avator: ''
        },
        {
          id: '001',
          nickname: '空我',
          avator: ''
        },
        {
          id: '001',
          nickname: '亚吉脱',
          avator: ''
        },
        {
          id: '001',
          nickname: '时王',
          avator: ''
        },
        {
          id: '001',
          nickname: '甲斗王',
          avator: ''
        },
        {
          id: '001',
          nickname: '空我',
          avator: ''
        },
        {
          id: '001',
          nickname: '亚吉脱',
          avator: ''
        },
        {
          id: '001',
          nickname: '时王',
          avator: ''
        }
      ]
    }
  },
  created () {
  },
  mounted () {
    this.clickName = this.friendList[0].nickname
  },
  methods: {
    chooseItem (item) {
      this.clickName = item.nickname
    }
  }
}
</script>

<style lang="less" scoped>
@import url("./index");
</style>